<template>
  <div>
    <h1>Home</h1>
    <div>
      <!-- 
        如果直接使用router-link组件进行导航,被称作为声明式路由导航
        router-link声明式导航底层仍然使用的是编程式路由导航,已经默认帮我们解决了重复导航的bug
          - to属性:就是push方法接受的第一个参数location
           replace属性:替换历史记录
             - tag属性:想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
          - active-class属性:设置链接激活时使用的 CSS 类名
       -->
       <router-link to="/home/new" tag="button" active-class="active">新闻</router-link>
       <router-link :to="{path:'/home/music'}" tag="button" active-class="active">音乐</router-link>
       <router-link :to="{
        name:'Game'}" tag='button' active-class="active">游戏</router-link>
    </div>
    <!-- 缓存路由组件 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    
  </div>
</template>

<script>
export default {
name:"Home",

}
</script>

<style>
.active{
  background: red;
}
</style>